
	<title>我的购物车</title>

    <link rel="stylesheet" type="text/css" href="/static/home/css/pages-cart.css" />

	<script type="text/javascript" src="/static/home/js/pages/index.js"></script>

	<!--主内容-->
	<div class="cart py-container">
		<!--All goods-->
		<div class="allgoods">
			<h4>全部商品<span>11</span></h4>
			<div class="cart-main">
				<div class="yui3-g cart-th">
					<div class="yui3-u-1-4"><input type="checkbox" name="" id="" value="" /> 全部</div>
					<div class="yui3-u-1-4">商品</div>
					<div class="yui3-u-1-8">单价（元）</div>
					<div class="yui3-u-1-8">数量</div>
					<div class="yui3-u-1-8">小计（元）</div>
					<div class="yui3-u-1-8">操作</div>
				</div>
				<div class="cart-item-list">
					<div class="cart-shop">
						<input type="checkbox" name="" id="" value="" />
						<span class="shopname self">传智自营</span>
					</div>
					<div class="cart-body">
						{foreach $list as $v}
						<div class="cart-list">
							<ul class="goods-list yui3-g" cart_id="{$v.spec_goods_id}" number="{$v.number}">
								<li class="yui3-u-1-24">
									<input type="checkbox" class="row_check" name="" id="" value="" {if($v.is_selected)}checked="checked"{/if}/>
								</li>
								<li class="yui3-u-6-24">
									<div class="good-item">
										<div class="item-img"><img src="{$v.goods.goods_logo}" /></div>
										<div class="item-msg">{$v.goods.goods_name}</div>
									</div>
								</li>
								<li class="yui3-u-5-24">
									<div class="item-txt">{$v.goods.value_names}</div>
								</li>
								<li class="yui3-u-1-8"><span class="price">{$v.goods.goods_price}</span></li>
								<li class="yui3-u-1-8">
									<a href="javascript:void(0)" class="increment mins">-</a>
									<input autocomplete="off" type="text" value="{$v.number}" minnum="1" class="itxt current_number" />
									<a href="javascript:void(0)" class="increment plus">+</a>
								</li>
								<li class="yui3-u-1-8"><span class="sum">{$v.goods.goods_price * $v.number}</span></li>
								<li class="yui3-u-1-8">
									<a href="javascript:;" class="delete">删除</a><br />
									<a href="#none">移到我的关注</a>
								</li>
							</ul>
						</div>
						{/foreach}
					</div>
				</div>
			</div>
			<div class="cart-tool">
				<div class="select-all">
					<input type="checkbox" class="check_all" name="" value="" />
					<span>全选</span>
				</div>
				<div class="option">
					<a href="#none">删除选中的商品</a>
					<a href="#none">移到我的关注</a>
					<a href="#none">清除下柜商品</a>
				</div>
				<div class="money-box">
					<div class="chosed">已选择<span id="total_number">0</span>件商品</div>
					<div class="sumprice">
						<span><em>总价（不含运费） ：</em><i id="total_price" class="summoney">¥0</i></span>
						<span><em>已节省：</em><i>-¥0</i></span>
					</div>
					<div class="sumbtn">
						<a class="sum-btn" href="javascript:;">结算</a>
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
			<div class="deled">
				<span>已删除商品，您可以重新购买或加关注：</span>
				<div class="cart-list del">
					<ul class="goods-list yui3-g">
						<li class="yui3-u-1-2">
							<div class="good-item">
								<div class="item-msg">Apple Macbook Air 13.3英寸笔记本电脑 银色（Corei5）处理器/8GB内存</div>
							</div>
						</li>
						<li class="yui3-u-1-6"><span class="price">8848.00</span></li>
						<li class="yui3-u-1-6">
							<span class="number">1</span>
						</li>
						<li class="yui3-u-1-8">
							<a href="#none">重新购买</a>
							<a href="#none">移到我的关注</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="liked">
				<ul class="sui-nav nav-tabs">
					<li class="active">
						<a href="#index" data-toggle="tab">猜你喜欢</a>
					</li>
					<li>
						<a href="#profile" data-toggle="tab">特惠换购</a>
					</li>
				</ul>
				<div class="clearfix"></div>
				<div class="tab-content">
					<div id="index" class="tab-pane active">
						<div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
							<div class="carousel-inner">
								<div class="active item">
									<ul>
										<li>
											<img src="/static/home/img/like1.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like2.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like3.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like4.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
									</ul>
								</div>
								<div class="item">
									<ul>
										<li>
											<img src="/static/home/img/like1.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like2.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like3.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like4.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
							<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
						</div>
					</div>
					<div id="profile" class="tab-pane">
						<p>特惠选购</p>
					</div>
				</div>
			</div>
		</div>
	</div>
<script>
	$(function(){
		//重新计算已选商品数量和金额
		var change_total = function(){
			//获取到选中行 row_check选中的
			var total_number = 0;
			var total_price = 0;
			$('.row_check:checked').each(function(i, v){
				total_number += parseInt( $(v).closest('ul').find('.current_number').val() );
				total_price += parseFloat( $(v).closest('ul').find('.sum').html() );
			});
			//将累加的价格和数量放到页面中
			$('#total_number').html(total_number);
			$('#total_price').html('￥' + total_price);
		};

		/**
		 * 修改购买数量
		 * @param number 修改数量
		 * @param element 触发事件的标签
		 */
		var change_num = function(number, element){
			//需要的参数  id  number
			var data = {
				"id":$(element).closest('ul').attr('cart_id'),
				"number":number
			};
			//发送ajax请求
			$.ajax({
				"url":"{:url('home/cart/changenum')}",
				"type":"post",
				"data":data,
				"dataType":"json",
				"success":function(res){
					if(res.code != 200){
						alert(res.msg);return;
					}
					//将新的数量展示到页面
					$(element).closest('ul').find('.current_number').val(number);
					//将新的数量修改到当前行ul的number属性上，用于出错后恢复数据的
					$(element).closest('ul').attr('number', number);
					//重新计算小计金额
					//取当前行的单价
					var price = parseFloat( $(element).closest('ul').find('.price').html() );
					//计算小计金额
					var sum = price * number;
					//将小计金额放到页面中
					$(element).closest('ul').find('.sum').html(sum);
					//重新计算已选商品数量和金额
					change_total();
				}
			});
		};
		//全选效果
		$('.check_all').change(function(){


			var goods_val_arr = [];
			var goods_arr = $("ul[cart_id]");


			$.each(goods_arr,function (index,item){
				goods_val_arr.push($(item).attr('cart_id'));
			})
			console.log(goods_val_arr);
			//获取全选的选中状态  checked属性
			var status = $(this).prop('checked');
			//将每一行的checkbox状态 和全选设置成一样的
			$('.row_check').prop('checked', status);
			//重新计算已选商品数量和金额
			change_total();
			//修改选中状态到购物车数据中
			//参数  id  status

			var data = {
				"id":"all",
				'all_ids':goods_val_arr,
				"status":$(this).prop('checked') ? 1 : 0,
			};
			//发送ajax请求
			$.ajax({
				"url":"{:url('home/cart/changestatus')}",
				"type":"post",
				"data":data,
				"dataType":"json",
				"success":function(res){
					if(res.code != 200){
						alert(res.msg);return;
					}
				}
			});
		});

		//每一行checkbox选中
		$('.row_check').change(function(){
			//判断 全选是否应该选中
			check_all();
			//重新计算已选商品数量和金额
			change_total();
			//修改选中状态到购物车数据中
			//参数  id  status
			var data = {
				"id":$(this).closest('ul').attr('cart_id'),
				"status":$(this).prop('checked') ? 1 : 0,
			};
			//发送ajax请求
			$.ajax({
				"url":"{:url('/cart/changestatus')}",
				"type":"post",
				"data":data,
				"dataType":"json",
				"success":function(res){
					if(res.code != 200){
						alert(res.msg);return;
					}
				}
			});
		});
		//页面刷新，直接判断 全选是否应该选中
		function check_all(){
			//判断 选中的行数  和 总行数 是否相等
			var status = $('.row_check:checked').length == $('.row_check').length;
			//设置全选的选中状态 checked属性
			$('.check_all').prop('checked', status);
		}
		check_all();
		//重新计算已选商品数量和金额
		change_total();

		//修改购买数量
		//+号
		$('.plus').click(function(){
			var number = parseInt( $(this).closest('ul').find('.current_number').val() );
			number += 1;

			//调用封装的函数
			change_num(number, this);
		});
		//-号
		$('.mins').click(function(){
			var number = parseInt( $(this).closest('ul').find('.current_number').val() );
			if(number == 1) return;
			number -= 1;
			//调用封装的函数
			change_num(number, this);
		});
		//input输入框直接修改
		$('.current_number').change(function(){
			var number = $(this).val();
			//检测输入的值 是否数字
			if(isNaN(number)){
				//不是数字
				alert('购买数量必须是数字');
				var old_number = $(this).closest('ul').attr('number');
				$(this).val(old_number);
				return;
			}
			if(parseInt(number) != number || number <= 0){
				//数量必须是正整数
				alert('购买数量必须是正整数');
				var old_number = $(this).closest('ul').attr('number');
				$(this).val(old_number);
				return;
			}
			//调用封装的函数
			change_num(number, this);
		});

		//删除
		$('.delete').click(function(){
			//获取id 删除条件参数
			var data = {
				"id":$(this).closest('ul').attr('cart_id')
			};
			var that = this;
			//发送ajax请求
			$.ajax({
				"url":"{:url('home/cart/delcart')}",
				"type":"post",
				"data":data,
				"dataType":"json",
				"success":function(res){
					if(res.code != 200){
						alert(res.msg);return;
					}
					//将当前行从页面移除
					//$(that).closest('ul').parent().remove();
					$(that).closest('.cart-list').remove();
					//重新计算已选商品数量和金额
					change_total();
				}
			});
		});

		//结算
		$('.sum-btn').click(function(){
			//判断是否有选中的购物记录
			if($('.row_check:checked').length == 0){
				alert('请选择要结算的商品');
				return;
			}
			//跳转到结算页
			location.href = "{:url('home/order/create')}";
		});
	});
</script>